<template>
	<view>
		<view class="top">
			<view style="height:130upx;">
				<view class="top_left">
					<text>{{scores}}</text>
					<text>积分</text>
				</view>
				<view class="top_right" @tap="rules()">积分规则</view>
			</view>
			<view class="radius"></view>
		</view>
		<view class="score_get_exchange">
			<view class="get_score get_exchange">
				<view class="score_title">分享赚积分</view>
				<view class="score_intro">分享赚积分，好物随心换</view>
				<view class="score_button" @tap="shareto">去分享</view>
			</view>
			<view class="exchange_score get_exchange">
				<view class="score_title">积分兑商品</view>
				<view class="score_intro">积分兑商品，好物随心换</view>
				<view class="score_button" @tap="toshop">去兑换</view>
			</view>
		</view>
		<!-- <view class="share">
			<view class="share_title" @tap="shareto()">分享赚积分</view>
			<view class="share_box" @tap="shareto()">
				<view class="share_left">
					<image src="../../static/share.png"></image>
					<view class="share_intro">
						<view>分享</view>
						<view>分享给好友下单可获得积分</view>
					</view>
				</view>
				<view class="share_button">去分享</view>
			</view>
		</view> -->
		<view class="details">
			<view class="detail_title">积分明细</view>
			<view class="row j-sa px-3  font-weight-6" style="border-bottom:1upx solid #f6f6f6;">
				<view class="px-1 py-2" @tap="activeTab(0)" :class="{active:active == 0}">全部</view>
				<view class="px-1 py-2" @tap="activeTab(1)" :class="{active:active == 1}">收入</view>
				<view class="px-1 py-2" @tap="activeTab(2)" :class="{active:active == 2}">支出</view>
			</view>
			<view v-if="flag">
				<block v-for="(item,index) in scoreBills" :key="index">
					<view class="lists">
						<view class="list_content">
							<image v-if="item.img" :src="baseUrl+item.img"></image>
							<view class="list_info">
								<view class="list_title">{{item.title}}</view>
								<view class="list_type">
									<text v-if="item.type==1">下线用户购买送积分</text>
									<text v-else-if="item.type==2">用户自己购买抵消积分</text>
									<text v-else-if="item.type==3">用户自己积分商城购物扣除积分</text>
									<text v-else-if="item.type==4">提现</text>
								</view>
								<view class="list_prices">
									<view class="list_price">{{item.time}}</view>
								</view>
							</view>
							<view class="list_number">
								<text v-if="item.type==1">+</text>
								<text v-else-if="item.type==2">-</text>
								<text v-else-if="item.type==3">-</text>
								<text v-else-if="item.type==4">-</text>
								{{item.score}}
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-else>
				<view style="width:100%;margin: 50rpx 0 100rpx;text-align: center;">
					<image src="../../static/nocontent.png" mode="" style="width: 243rpx;height: 200rpx;"></image>
					<view style="color: #999;">
						暂无内容
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				page:1,
				baseUrl:request.common.baseUrl,
				active:0,
				scores:'',
				scoreBills:[],
				flag: false
			}
		},
		onLoad:function(option){
			this.scores=option.scores
			uni.request({
				url: request.common.baseUrl+'/api/goods/wscoreBill',
				data: {
					token:uni.getStorageSync('keyToken'),
					openid:uni.getStorageSync('keyOpenid'),
					page:this.page,
					in_out:this.active
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.scoreBills=res.data.data
					}
					if(this.scoreBills.length == 0){
						this.flag = false
					}else {
						this.flag = true
					}
				}
			});
		},
		methods: {
			toshop(){
				uni.navigateTo({
					url:'scoreshop'
				})
			},
			shareto(){
				uni.navigateTo({
					url:'/pages/distribution/qrcode'
				})
			},
			rules(){
				uni.navigateTo({
					url:'/pages/score/rules'
				})
			},
			activeTab(v){
				this.active = v;
				this.page=1;
				uni.request({
				    url: request.common.baseUrl+'/api/goods/wscoreBill',
				    data: {
						token:uni.getStorageSync('keyToken'),
				    	openid:uni.getStorageSync('keyOpenid'),
				    	page:this.page,
				    	in_out:this.active
				    },
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
						this.scoreBills=[]
				        if(res.data.code==200){
							this.scoreBills=res.data.data
						}
						if(this.scoreBills.length == 0){
							this.flag = false
						}else {
							this.flag = true
						}
				    }
				});
			}
		},
		onReachBottom:function(){
			this.page=this.page+1
			uni.request({
				url: request.common.baseUrl+'/api/goods/wscoreBill',
				data: {
					token:uni.getStorageSync('keyToken'),
					openid:uni.getStorageSync('keyOpenid'),
					page:this.page,
					in_out:this.active
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						for (var j = 0; j < res.data.data.length; j++) {
							this.scoreBills.push(res.data.data[j])
						}
					}else{
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
		}
	}
</script>

<style>
	.active{
		border-bottom: 2px solid #ff6101;color:#FF6101;
	}
page{
	background-color: #f6f6f6;
}
.top{
	width:750upx;
	height:180upx;
	background-color:#626377;
}
.top_left{
	float:left;
	margin:30upx 0 0 35upx;
}
.top_left text:nth-child(1){
	font-size:38upx;
	color:#FFFFFF;
	float:left;
}
.top_left text:nth-child(2){
	font-size:24upx;
	color:#FFFFFF;
	margin-left:15upx;
	float:left;
	margin-top:20upx;
}
.top_right{
	float:right;
	margin-top:40upx;
	background-color:#818292;
	color:#FFFFFF;
	font-size:24upx;
	height:40upx;
	line-height:40upx;
	text-align:center;
	border-top-left-radius:30upx;
	border-bottom-left-radius:30upx;
	padding:10upx 25upx 10upx 40upx;
}
.radius{
	width:750upx;
	height:50upx;
	background-color:#f6f6f6;
	border-top-left-radius:30upx;
	border-top-right-radius:30upx;
	padding-bottom:4upx;
}
.score_get_exchange{
	display: flex;
	justify-content: space-between;
	width:690upx;
	height:200upx;
	margin:0 30upx 30rpx;
}
.get_score{
	float:left;
	background-image:url('../../static/getscore.png');
	background-size:100% 100%;
}
.exchange_score{
	float:left;
	margin-left:50upx;
	background-image:url('../../static/exchangescore.png');
	background-size:100% 100%;
}
.get_exchange{
	width:300upx;
	height:200upx;
}
.score_title{
	color:#FFFFFF;
	font-size:32upx;
	height:30upx;
	line-height:30upx;
	margin:25upx 0 0 25upx;
}
.score_intro{
	color:#FFFFFF;
	font-size:24upx;
	height:40upx;
	line-height:40upx;
	margin-left:25upx;
	margin-top: 20upx;
}
.score_button{
	height:40upx;
	line-height:40upx;
	color:#FFFFFF;
	font-size:24upx;
	border:1upx solid #FFFFFF;
	border-radius:25upx;
	text-align:center;
	padding:0 12upx;
	width:100upx;
	margin-left:25upx;
	margin-top:20upx;
}
.share{
	width:650upx;
	height:200upx;
	margin:50upx;
	background-color:#FFFFFF;
	border-radius:20upx;
}
.share_title{
	height:80upx;
	line-height:80upx;
	font-size:36upx;
	font-weight:700;
	color:#111111;
	margin-left:50upx;
}
.share_box{
	height:120upx;
	width:650upx;
}
.share_left{
	height:120upx;
	width:400upx;
	margin-left:50upx;
	float:left;
}
.share_left image{
	width:80upx;
	height:80upx;
	float:left;
}
.share_intro{
	width:300upx;
	float:left;
	margin-left:20upx;
}
.share_intro view:nth-child(1){
	font-size:30upx;
	color:#666666;
	height:40upx;
	line-height:40upx;
}
.share_intro view:nth-child(2){
	font-size:24upx;
	color:#666666;
	height:40upx;
	line-height:40upx;
}
.share_button{
	float:right;
	font-size:24upx;
	border:1upx solid #1366ea;
	width:100upx;
	height:46upx;
	line-height:44upx;
	border-radius:23upx;
	text-align:center;
	padding:0 12upx;
	color:#1366EA;
	margin-top:25upx;
	margin-right:25upx;
}
.details{
	width:690upx;
	margin:0 30upx;
	background-color:#FFFFFF;
	border-radius:20upx;
	padding-bottom:5upx;
}
.detail_title{
	height:80upx;
	line-height:100upx;
	font-size:36upx;
	font-weight:700;
	color:#111111;
	margin-left:30upx;
}
.lists{
	width:640upx;
	margin:25upx;
	border-bottom:1upx solid #f6f6f6;
}
.list_content{
	width:640upx;
	height:150upx;
}
.list_content image{
	width:180upx;
	height:120upx;
	float:left;
}
.list_info{
	float:left;
	margin-left:25upx;
}
.list_title{
	width:300upx;
	font-size:28upx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.list_type{
	width:300upx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:24upx;
	color:#999999;
}
.list_prices{
	width:300upx;
}
.list_price{
	float:left;
	font-size:20upx;
	color:#999999;
}
.list_number{
	float:right;
	font-size:20upx;
	color:#ff6101;
}
</style>
